/* 引入tailwindcss tailwindcss": "^4.1.11只需要引入tailwindcss即可 */
@import 'tailwindcss';
/* 引入图标字体 */
@import '@/assets/icon/iconfont.css';
/* 其他自定义样式 */
@theme {
  --color-primary: #2563eb; /* 更深的蓝色作为主色调 */
  --color-secondary: #10b981;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-dark: #1e293b;
  --color-light: #f8fafc;
  --color-primary-light: #eff6ff;
  --color-gray-light: #f1f5f9;

  --font-family-inter: [ 'Inter', 'system-ui', 'sans-serif'];
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-card-active: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
}

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .drag-active {
    @apply border-primary bg-primary-light ring-primary/20 ring-2;
  }
  .upload-item {
    @apply shadow-card hover:shadow-card-hover mb-4 rounded-xl bg-white p-4 transition-all duration-300;
  }
  .btn {
    @apply flex transform cursor-pointer items-center justify-center gap-2 rounded-md px-2 py-1 text-sm font-medium transition-all duration-200 hover:scale-105 active:scale-95;
  }
  .btn-primary {
    @apply bg-primary hover:bg-primary/90 text-white;
  }
  .btn-secondary {
    @apply bg-secondary hover:bg-secondary/90 text-white;
  }
  .btn-danger {
    @apply bg-danger hover:bg-danger/90 text-white;
  }
  .btn-warning {
    @apply bg-warning hover:bg-warning/90 text-white;
  }
  .btn-outline {
    @apply border border-gray-300 hover:bg-gray-50;
  }
  .btn-info {
    @apply border border-gray-300 hover:bg-gray-50;
  }

  .progress-shine {
    position: relative;
    overflow: hidden;
  }
  .progress-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shine 2s infinite;
  }
  @keyframes shine {
    100% {
      left: 100%;
    }
  }
  .fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* 图标 */
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
}
